<template>
  <div class="prod-details">
    <el-row>
      <el-col :span="10" :class="['sku-image']">
        <el-image
          style="width: 400px; height: 400px;border:1px solid #eeeeee;"
          :src="imageServer+'/'+details.skus[curSkuIndex].images[curImageIndex].largeImage"
          fit="fit"
        ></el-image>
        <div :class="['image-list']">
          <i class="el-icon-arrow-left" @click="handleCurImageIndexChange(0)"></i>
          <el-image
            :class="{'image-list-item':true,'image-list-item-active':index-1 === curImageIndex-curLeftImageIndex}"
            v-for="index in imageListLengthMax>details.skus[curSkuIndex].images.length-curLeftImageIndex? details.skus[curSkuIndex].images.length-curLeftImageIndex:imageListLengthMax"
            :key="''+index"
            style="width:45px; height:45px;"
            :src="imageServer+'/'+details.skus[curSkuIndex].images[curLeftImageIndex+index-1].image"
            fit="fit"
            @mouseover="curImageIndex=curLeftImageIndex+index-1"
          >
          </el-image>
          <i class="el-icon-arrow-right" @click="handleCurImageIndexChange(1)"></i>

        </div>
      </el-col>
      <el-col :span="12" :class="['sku-brief']">
        <el-row style="font-weight: bolder;font-size: 20px;text-align: left;">
          <span>{{details.skus[curSkuIndex].name}}</span>
        </el-row>
        <el-row style="color: red; font-weight: bolder;text-align: left;">
          <span>限时优惠!</span>
        </el-row>
        <el-row style="background-color:#eeeeee;padding-left: 10px;height:160px;">
          <el-row style="text-align: left;margin-top:30px;font-size: 18px;">
            秒 杀 价: <span style="color: red;">¥{{(details.skus[curSkuIndex].price/100).toFixed(2)}}</span>
            <span style="color: royalblue;font-size: 14px;">降价通知</span>
          </el-row>
          <el-row style="text-align: left;margin-top:10px;">
            <el-col :span="4">
              促　　销
            </el-col>
            <el-col :span="18">
              <el-row style="margin-bottom: 10px;">
                <span style="border: 1px solid red;color: red;padding:1px;">限购</span>
                该商品购买1-200件时享受单件价￥{{(details.skus[curSkuIndex].price/100).toFixed(2)}}，超出数量以结算价为准
              </el-row>
              <el-row>
                <span style="border: 1px solid red;color: red;padding:1px;">换购</span> 购买1件可优惠换购热销商品 立即换购 >>
              </el-row>
            </el-col>
          </el-row>
        </el-row>
        <el-row style="margin-top:30px;text-align: left;">
          <el-col :span="3" style="text-align: left;padding-top: 6px;font-size: 18px;">
            选择规格:
          </el-col>
          <el-col :span="21">
            <el-select v-model="curSkuIndex" style="width:800px;" placeholder="请选择">
              <el-option
                style="width:800px;"
                v-for="(item,index) in details.skus"
                :key="''+item.id"
                :label="item.name"
                :value="index">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;align-items: flex-start;">
          <el-col :span="4">
            <el-input-number v-model="count"
                             style="width:100px;float: left;"
                             controls-position="right"
                             @change="handleCountChange"
                             :min="1" :max="details.skus[curSkuIndex].count"></el-input-number>
          </el-col>
          <el-col :span="4"

                  style="cursor: pointer; color: white; font-weight: bolder; background-color:rgb(205,65,60);height:40px;border-radius: 2px;text-align: center;padding-top: 8px;">
            <span @click="handleAddToCart">加入购物车</span>
          </el-col>
        </el-row>
        <el-row style="text-align: left;margin-top: 5px;color: gray;font-size: 14px;">
          温馨提示 支持7天无理由退货
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        达人选购
      </el-col>
      <el-col :span="20">
        <el-tabs type="border-card" v-model="tabIndex">
          <el-tab-pane label="商品介绍" name="1" :class="{'tab-active':tabIndex=='1'}">

            <el-row style="text-align: left;">
              品牌: <span style="color: royalblue;">{{details.brand}}</span>
            </el-row>
            <el-row style="margin-top:10px;">
              <el-col :span="8"
                      style="text-align: left; color:gray; font-size: 14px;margin-bottom:5px;"
                      v-for="attr of details.skus[curSkuIndex].attrs" :key="'attr'+attr.name">
                {{attr.name}}: {{attr.value}}
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-row v-for="image of details.images" :key="''+image">
                <el-image :src="imageServer+'/'+image"
                          style="width:100%;"
                          fit="fit"
                ></el-image>
              </el-row>

            </el-row>
          </el-tab-pane>
          <el-tab-pane label="规格与包装" name="2" style="font-size: 14px;color: gray;"
                       :class="{'tab-active':tabIndex=='2'}"
          >
            <el-row
              style="border-bottom: 1px solid #eeeeee;padding:10px;"
              v-for="(item,index) of details.skus[curSkuIndex].specGroups" :key="'spec'+index">
              <el-col :span="4" style="text-align: right;">
                {{item.group}}
              </el-col>
              <el-col :span="20">
                <el-row
                        style="margin-bottom:10px;"
                        v-for="(spec,idx) of item.specsList" :key="index+'/'+idx">
                  <el-col :span="5"
                    style="text-align: right;margin-right: 50px;"
                  > {{spec.name}}:</el-col>
                  <el-col :span="10"
                    style="text-align: left;"
                  >{{spec.value}}</el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="售后保障" name="3"
                       :class="{'tab-active':tabIndex=='3'}"
          >售后保障</el-tab-pane>
          <el-tab-pane label="商品评价" name="4"
                       :class="{'tab-active':tabIndex=='4'}"
          >商品评价</el-tab-pane>
          <el-tab-pane label="商品问答" name="5">商品问答</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import Vue from 'vue'
  export default {
    name: "ProdDetails",
    data() {
      return {
        tabIndex: '1',
        imageListLengthMax: 5,
        curSkuIndex: 0,
        curImageIndex: 0,
        curLeftImageIndex: 0,
        details: {},

        count: 1
      }
    },
    computed: {
      ...mapState({
        imageServer: state => state.prod.imageServer
        // cart: state=>state.auth.cart
      }),
      cart(){
        return this.$store.state.auth.cart;
      }
    },
    created() {
      this.getSpuDetails();
    },

    methods: {
      getSpuDetails() {
        this.api.__api__SpuDetails(this.$route.params.id)
          .then(data => {
            data.data.skus.forEach(sku => {
              sku.attrs.sort((a1, a2) => {
                if (a1.name > a2.name) {
                  return 1;
                } else if (a1.name < a2.name) {
                  return -1;
                } else {
                  return 0;
                }
              });
            });


            this.details = data.data;
          }).catch(error => null)
      },


      handleCurImageIndexChange(n) {
        if (n == 1 && this.curLeftImageIndex + this.imageListLengthMax < this.details.skus[this.curSkuIndex].images.length) {
          this.curLeftImageIndex = this.curLeftImageIndex + this.imageListLengthMax;
          this.curImageIndex = this.curLeftImageIndex;
        } else if (n == 0 && this.curLeftImageIndex > 0) {
          this.curLeftImageIndex = this.curLeftImageIndex - this.imageListLengthMax;
          this.curImageIndex = this.curLeftImageIndex;
        }

      },

      handleCountChange(value) {

      },

      handleAddToCart(){



        const skuId = this.details.skus[this.curSkuIndex].id;
        var num = this.count;
        if( this.cart.items) {
          const items = this.cart.items.filter(v => v.skuId == skuId);
          if (items && items.length > 0) {
            num += items[0].skuCount;
          }
        }

        this.api.__api__CartUpdate(this.cart.id,skuId,num)
          .then(data=>{
            this.$store.commit('setCart',data.data);
          })




      }
    }


  }
</script>

<style scoped>
  .prod-details {
    width: 100%;
  }

  .sku-image {
    width: 600px;


  }

  .image-list {
    width: 100%;
    height: 100px;
    /*margin-top:30px;*/
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bolder;
  }

  .image-list-item {
    width: 54px;
    height: 54px;
    display: inline;
    padding: 5px;
  }

  .image-list-item:hover {
    border: 1px solid red;
  }

  .image-list-item-active {
    border: 1px solid red;
  }

  .sku-brief {
    margin-left: 20px;

  }

  .tab-active{

  }
</style>
